<template>
  <div class="app-container"  style="padding: 10px;">
    <div class="header-container">
      <el-button type="primary" @click="handleGenerateNum()">生成</el-button>
      <!-- Trigger -->
      <el-button type="success" class="copy" v-copy="generateNum">
        复制
      </el-button>
    </div>

    <div>
      <h2>基本参数</h2>
      <p>开始数: <el-input style="width: 400px;" type="number" v-model="startNum" placeholder=""/></p>
      <p>结束数: <el-input style="width: 400px;" type="number" v-model="endNum" placeholder=""/></p>
      <p>填充位数: <el-input style="width: 400px;" type="text" v-model="fillNum" placeholder=""/></p>
      <p>前缀: <el-input style="width: 400px;" type="text" v-model="prefix" placeholder=""/></p>
      <p>后缀: <el-input style="width: 400px;" type="text" v-model="suffix" placeholder=""/></p>
      <h3>过滤条件，有值就判断</h3>
      <p>过滤含有数字: <el-input style="width: 400px;" type="text" v-model="filterNum" placeholder=""/></p>
      <p>过滤个位数数字: <el-input style="width: 400px;" type="text" v-model="filterSingleDigit" placeholder=""/></p>

      <h3>标记条件</h3>
      <p>标红的个位数数字: <el-input style="width: 400px;" type="text" v-model="markSingleDigit" placeholder=""/></p>
    </div>
    <h4>当前数字总和 <span style="color: blue">{{ generateCount }}</span></h4>
    <div id="msg" style="white-space: pre-wrap;" v-html="generateNum"></div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      startNum: 1,
      endNum: 10,
      msg: '111111',
      prefix: "",
      suffix: "",
      fillNum: 3,
      fillTxt: "0",
      generateNum: "",
      generateCount: 0,
      filterNum: null,
      filterSingleDigit: null,
      // 标记个位数的数字
      markSingleDigit: null
    }
  },
  computed: {},
  created() {
  },
  mounted() {
  },
  methods: {
    handleGenerateNum() {
      const {startNum, endNum, prefix, suffix, fillNum, fillTxt, filterNum, filterSingleDigit, markSingleDigit} = this
      let str = "";
      ''
      let generateCount = 0;
      for (let i = startNum; i <= endNum; i++) {
        let currNum = i + ''
        if (filterNum && currNum.includes(filterNum)) {
          continue;
        }

        // 过滤个位数
        if (filterSingleDigit) {
          let singleDigit = currNum.substring(currNum.length - 1);
          if (filterSingleDigit === singleDigit) {
            continue;
          }
        }
        str += prefix;
        if (markSingleDigit) {
          let singleDigit = currNum.substring(currNum.length - 1);
          console.log('singleDigit', singleDigit)
          if (markSingleDigit === singleDigit) {
            str += "<span style='color: red'>" + currNum.padStart(fillNum, fillTxt) + "</span>";
          } else {
            str += currNum.padStart(fillNum, fillTxt);
          }
        } else {
          str += currNum.padStart(fillNum, fillTxt);
        }
        str += suffix;
        str += "\n"
        generateCount++;
      }
      this.generateNum = str;
      this.generateCount = generateCount;
      console.log(str)
    },

    copy() {
      console.log("test")
    }
  },

}
</script>

<style scoped>
.app-container {

}

</style>
